<template>
	<view>
		<view v-for="(item,index) in blog" :key="item.id">
			<u-gap height="20" bg-color="#ffffff"></u-gap>
		
			<!-- 博客：标题 主体 图片 -->
			<view class="allboke" @click="goBoke(item)">
				<view class="boke">
					<view class="bokeTitle"> 
						<text class="titleText">{{item.title}}</text>
					</view>
					
					<u-line color="#d5d5d5" /> <!-- 标题与正文分割线 -->
					
					<view class="bokeBody">  <!-- 主题 -->
						<text class="text">{{item.content}}</text>
					</view>
				</view>
				<image :src=item.blogImg class="boke_pic"></image>
			</view>
			
			<!-- 博客主体，点赞关注之间的分割线 -->
			<u-line color="#d5d5d5" /> 
			<u-gap height="10" bg-color="#e1e1e1"></u-gap>
			<u-line color="#d5d5d5" />
		</view>
		<!-- 返回顶部 -->
		<view class="wrap">
			<u-back-top :scroll-top="scrollTop"></u-back-top>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				scrollTop:1,
				blog:[],
				myId:""
				
			}
		},
		onPageScroll(e) {   	//用于回到顶部组件获取位置
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			this.myId=getApp().globalData.globalUserid;
		},
		
		onShow(){
			this.myId=getApp().globalData.globalUserid;
			uni.request({
			url:"http://localhost:9090/MyBlog?UserId="+this.myId,
			method:"GET",
			success:(res)=>{
				console.log(res);
					//成功，code 200,更新博客列表
			 		if(res.data.code*1==200){
						this.blog=res.data.result;
						
			 		}
			 		//失败,code  201
			 		else{
							this.$u.toast("出错了");
			 		}
			 	}  
			 });
		},
		methods: {
			//点击博客
			goBoke(item){
				console.log("跳转到博客详情");
				uni.navigateTo({
					url: '/pages/TRH_pages/Showboke?item=' + encodeURIComponent(JSON.stringify(item))
				})
				
			}

		}
	}
</script>
<style scoped lang="scss">
 @import "@/common/demo.scss"; 
 page{
 		background-color: #eee;
 	}
	.titleText{		//博客标题的样式
		font-size: 20px;
		padding-left: 5% ;
				}
	.bokeTitle{		//博客标题
		width:60vw;
		height:100rpx;
		background: #ffffff;				
			}
	.bokeBody{		//博客主体
		width:60vw;
		height:300rpx;
		background: #ffffff;
		display:flex;
		padding-left: 5% ;
			}
	.boke{				//装博客 标题 容器的样式
		width:60vw;
		height:400rpx;
		background: #2979ff;
	}
	
	.boke_pic{			//博客图片
		width:40vw;
		height:400rpx;
		background: #ffffff;
		display:flex;
	}
	.allboke{    			//装博客+博客图片的容器样式 
		width:100vw;
		height:400rpx;
		background: #00ff00;
		display: flex;
		flex-direction: row;
		}
	.text{
		display: -webkit-box; /*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical; /*排列方式*/ 
		-webkit-line-clamp: 6; /*显示文本行数(这里控制多少行隐藏)*/
		overflow: hidden; /*溢出隐藏*/
	}
 	

</style>